<template>
  <!-- <div class="frameContainers"> -->
  <header
    class="headNav"
    :style="{ paddingTop: statusBarHeight + 'px', height: (navHeight) + 'px' }"
  >
    <section
      class="headArea"
      :style="{ height: headAreaHeight + 'px', marginTop: headAreaMarTop + 'px' }"
    >
      <div class="box" :style="{lineHeight : headAreaHeight +'px'}">
        <ul class="headButton">
          <li v-if="!isNoReturn" @click="customBtnClick('return')">
            <img src="./img/reply.svg"  />
          </li>
          <li v-if="!isHome" @click="customBtnClick('home')">
            <img src="./img/home.svg"  />
          </li>
          <li @click="customBtnClick('changeLan')">
            <img src="./img/english.svg"  v-if="lang == 'en_US'"/>
            <img src="./img/chinese.svg"  v-if="lang == 'zh_CN'"/>
          </li>
        </ul>
      </div>
      <div class="box title">{{title}}</div>
      <div class="box"></div>
    </section>
  </header>
  <!-- <div :style="{height: navHeight + 'px',marginBottom:'20px'}"></div> -->
  <!-- </div> -->
</template>

<script>
export default {
  props: {
    isHome: {
      type: Boolean,
      default: false
    },
    isNoReturn: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pixelRatio: wx.getSystemInfoSync().pixelRatio, // 系统像素比
      statusBarHeight: wx.getSystemInfoSync().statusBarHeight, // 系统状态栏高度
      navHeight: '', // 顶部导航栏高度
      headAreaHeight:
        wx.getSystemInfoSync().pixelRatio *
        35 /
        wx.getSystemInfoSync().pixelRatio, // 顶部内容区域高度
      headAreaMarTop: '', //顶部内容区域外边距
      headleftBoxW: '', //顶部内容左侧区域外边距
      headRightBoxW: '', //顶部内容右侧区域外边距
      containersHeight: '', //页面内容区域高度
      local: wx.getStorageSync('local'), //读取国际化语言
      lang: wx.getStorageSync('lang') || 'zh_CN'
    }
  },
  mounted() {
    // IOS 与 安卓进行差异化处理
    if (wx.getSystemInfoSync().platform == 'ios') {
      this.navHeight = this.pixelRatio * 40 / this.pixelRatio
      this.headAreaMarTop = this.pixelRatio * 0.5 / this.pixelRatio
      this.headleftBoxW =
        wx.getSystemInfoSync().windowWidth -
        this.pixelRatio * 100 / this.pixelRatio
      this.headRightBoxW = this.pixelRatio * 100 / this.pixelRatio
      this.containersHeight =
        wx.getSystemInfoSync().windowHeight -
        (this.statusBarHeight + this.pixelRatio * 40 / this.pixelRatio)
    } else {
      this.navHeight = this.pixelRatio * 45 / this.pixelRatio
      this.headAreaMarTop = this.pixelRatio * 2.5 / this.pixelRatio
      this.headleftBoxW =
        wx.getSystemInfoSync().windowWidth -
        this.pixelRatio * 110 / this.pixelRatio
      this.headRightBoxW = this.pixelRatio * 110 / this.pixelRatio
      this.containersHeight =
        wx.getSystemInfoSync().windowHeight -
        (this.statusBarHeight + this.pixelRatio * 45 / this.pixelRatio)
    }
  },
  methods: {
    customBtnClick(type) {
      switch (type) {
        case 'return':
          this.returnHandler()
          break
        case 'changeLan':
          this.changeLanHandler()
          break
        default:
          this.homeHandler()
      }
    },

    // 返回上一页
    returnHandler() {
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: 1
      })
      this.$emit('pageReturn')
    },

    // 返回主页
    homeHandler() {
      wx.reLaunch({
        url: '/pages/home/index'
      })
    },

    // 切换语言
    changeLanHandler() {
      let that = this
      wx.showActionSheet({
        itemList: ['中文', 'English'],
        success(res) {
          if (res.tapIndex == 0) {
            let localList = require('../../utils/locales.js')
            wx.setStorageSync('local', localList.localList.zh)
            wx.setStorageSync('lang', 'zh_CN')
            that.lang = 'zh_CN'
            that.local = wx.getStorageSync('local')
            that.$emit('changeLan', that.local, 'zh')
          }
          if (res.tapIndex == 1) {
            let localList = require('../../utils/locales.js')
            wx.setStorageSync('local', localList.localList.en)
            wx.setStorageSync('lang', 'en_US')
            that.lang = 'en_US'
            that.local = wx.getStorageSync('local')
            that.$emit('changeLan', that.local, 'en')
          }
        }
      })
    }
  }
}
</script>

<style scope>
.frameContainers {
  /* width: 100%;
  height: 100%; */
}
.headNav {
  background-color: white;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 3;
}
.headArea {
  width: 100%;
  display: flex;
}

.box {
  display: flex;
  flex: 1;
  font-size: 12px;
}
.title {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 400;
}

.headButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  margin: 0 26rpx 4rpx 30rpx;
  padding: 0 10rpx;
  height: 62rpx;
  list-style: none;
  border-radius: 30px;
  border-color: #e9e9e9;
}
.headButton li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
}
.headButton li + li {
  margin-left: 0;
  border-left: 1px solid #e9e9e9;
}
.headButton img {
  width: 36rpx;
  height: 36rpx;
}
</style>
